<template>
  <div>
    <el-carousel v-if="posterList.length !== 0" height="500px" indicator-position="outside">
      <el-carousel-item v-for="(item, index) in posterList" :key="index">
        <img alt=""
             :src="item.url"
             class="image">
      </el-carousel-item>
    </el-carousel>

    <div class="content">
      <el-button
        @click="dialogFormVisible = true"
        type="primary"
        icon="el-icon-upload">
        上传轮播海报
      </el-button>

      <el-popconfirm
        confirm-button-text='确定'
        cancel-button-text='不用了'
        icon="el-icon-info"
        icon-color="red"
        @confirm="deleteAllPoster()"
        title=" 确定要删除所有海报吗？ "
      >
        <el-button
          style="margin-left: 30px"
          type="danger"
          size="primary"
          icon="el-icon-delete"
          slot="reference"
          >
          删除所有海报
        </el-button>
      </el-popconfirm>

      <template>
        <el-input
          style="width: 20%; margin-left: 900px;"
          v-model="search"
          size="mini"
          placeholder="请输入海报标题进行搜索"/>
      </template>

      <el-table
        ref="filterTable"
        :data="posterList.filter(data => !search || data.title.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%;margin-top: 15px;"
        height="500"
      >
        <el-table-column
          prop="createTime"
          label="上传时间"
          width="220"
        >
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="180">
        </el-table-column>
        <el-table-column label="地址预览">
          <template slot-scope="scope">
            <a target="_blank" :href="scope.row.url">{{ scope.row.url }}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="上架状态"
          width="220">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status"
              type="success"
              disable-transitions>上架
            </el-tag>
            <el-tag
              v-else
              type="warning"
              disable-transitions>下架
            </el-tag>
            <el-button v-if="!scope.row.status"
                       style="padding: 0 15px;color: #67C23A"
                       type="text"
                       @click="changePosterStatus(scope.$index, scope.row, true)"
                       icon="el-icon-upload2">上架
            </el-button>
            <el-button v-else
                       style="padding: 0 15px;color: #E6A23C"
                       type="text"
                       @click="changePosterStatus(scope.$index, scope.row, false)"
                       icon="el-icon-download">下架
            </el-button>
            <template style="padding-left: 100px">
              <el-popconfirm @confirm="handleDeletePoster(scope.$index, scope.row.id, scope.row.title)" title="确定要删除这条内容吗？">
                <el-button slot="reference"
                           style="color: #F56C6C" type="text"
                           icon="el-icon-delete">删除
                </el-button>
              </el-popconfirm>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="轮播海报" :visible.sync="dialogFormVisible" @close="handleClose" :destroy-on-close="true">
      <el-form ref="form" :model="uploadPoster" :rules="rules">
        <el-form-item label="海报标题" style="margin-bottom: 35px" label-width="120px" prop="title">
          <el-input style="width: 360px" v-model="uploadPoster.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上架状态" style="margin-bottom: 35px" label-width="120px" prop="status">
          <el-select style="width: 360px" v-model="uploadPoster.status" placeholder="请选择上架状态">
            <el-option label="上架" value="true"></el-option>
            <el-option label="下架" value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择图片" label-width="120px" prop="url">
          <el-upload
            style="float: left"
            class="upload-demo"
            accept=".png,.jpg"
            :headers="header"
            :action="uploadAction"
            :on-success="handleUploadSuccess"
            multiple
            :limit="1"
            :before-upload="beforeUpload"
            :on-exceed="handleExceed">
            <el-button type="primary" icon="el-icon-upload">上传轮播海报</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import config from "@/config";
  import {AddPoster, DeleteAllPoster, DeletePosterById, ListAllPoster, UpdatePoster} from "@/api/film";

  export default {
    inject:['reload'],
    mounted() {
      ListAllPoster().then(res => {
        this.posterList = res.data
      })
    },

    data() {
      return {
        rules: {
          title: [
            { required: true, message: '请填写海报标题！', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '请选择上架状态！', trigger: ['blur','change'] }
          ],
          url: [
            { required: true, message: '请上传电影封面！', trigger: ['blur','change'] }
          ],

        },
        header: {
          "Authorization": localStorage.getItem("token")
        },
        dialogFormVisible: false,
        uploadAction: config.API_URL + '/upload',
        uploadPoster: {
          url: '',
          title: '',
          status: '',
          createTime: '',
        },
        posterList: [],
        search: '',
      }
    },

    methods: {

      handleUploadSuccess(res) {
        this.uploadPoster.url = res
      },

      handleExceed(files, fileList) {
        this.$message.warning('超出1个文件，请先删除当前文件，再重新上传')
        return false
      },

      beforeUpload(file) {
        let isLt10M = file.size / 1024 / 1024 / 20 < 1
        if(!isLt10M) {
          this.$message.error("上传文件大小不能超过 20MB!")
        }
        return isLt10M;
      },

      submitUpload() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            AddPoster(this.uploadPoster).then(res => {
              this.dialogFormVisible = false;
              this.reload();
              this.$message({
                message: '轮播海报图上传成功！',
                type: 'success'
              });
            })

          } else {
            this.$message.error('请先完善表单相关信息！');
            return false;
          }
        })

      },

      deleteAllPoster() {
        this.posterList = '';
        DeleteAllPoster().then(res => {
          if (res.success === true) {
            this.$message({
              message: '轮播海报已全部删除！',
              type: 'success'
            });
          }
        })
      },

      changePosterStatus(index, poster, status) {
        poster.status = status
        UpdatePoster(poster).then(res => {
          this.posterList[index].status = status
          this.$message({
            message: '上架状态 更新成功！',
            type: 'success'
          });
        })
      },

      handleDeletePoster(index, id, title) {
        DeletePosterById(id).then(res => {
          this.posterList.splice(index, 1);
          this.$message({
            message: '海报<' + title + '>删除成功!',
            type: 'success'
          });
        })
      },

      handleClose(){
        this.$refs.form.resetFields();
      },

    }
  }
</script>

<style scoped>

  .content {
    padding: 20px 40px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .image {
    width: 100%;
    height: 500px;
  }

</style>
